import React, {forwardRef, useState, useEffect} from 'react';
import { Form, Input, Select  } from 'antd'
const { Option } = Select
const UserForm = forwardRef((props, ref) => {
    const [isDisabled, setisDisabled] = useState(false)
    useEffect(()=>{
        setisDisabled(props.isupDatadisabled)
    },[props.isupDatadisabled])
    //取出当前用户信息
    const { roleId, region } = JSON.parse(localStorage.getItem('token'))
    //判断全球and区域管理员可修改的区域
    const checkRegionDisadled = (item) => {
        if (props.isUpdata) {
            if (roleId === 1) {
                return false
            }else {
                return true
            }
        }else {
            if (roleId === 1) {
                return false
            }else {
                return item.value !== region
            }
        }
    }
    //判断可创建创建和修改的权限
    const checkRoleDisadled = (item) => {
        if (props.isUpdata) {
            if (roleId === 1) {
                return false
            }else {
                return true
            }
        }else {
            if (roleId === 1) {
                return false
            }else {
                return item.id !== 3
            }
        }
    }
    return (
        <Form
        ref={ref}
            layout="vertical"
        >
            <Form.Item
                name="username"
                label="用户名"
                rules={[
                    {
                    required: true,
                    message: 'Please input the title of collection!',
                    },
                ]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                name="password"
                label="密码"
                rules={[
                    {
                    required: true,
                    message: 'Please input the title of collection!',
                    },
                ]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                name="region"
                label="区域"
                rules={isDisabled?[]:[
                    {
                    required: true,
                    message: 'Please input the title of collection!',
                    },
                ]}
            >
                <Select disabled={isDisabled}>
                    {
                        props.reightList.map(item=>{
                            return (
                                <Option value={item.value} key={item.id} disabled={checkRegionDisadled(item)}>
                                    {item.title}
                                </Option>
                            )
                        })
                    }
                </Select>
            </Form.Item>
            <Form.Item
                name="roleId"
                label="角色"
                rules={[
                    {
                    required: true,
                    message: 'Please input the title of collection!',
                    },
                ]}
            >
                <Select onChange={value=>{
                    if (value === 1) {
                        setisDisabled(true)
                        ref.current.setFieldsValue({
                            region:""
                        })
                    }else{
                        setisDisabled(false)
                    }
                }}>
                    {
                        props.roleLise.map(item=>{
                            return (
                                <Option value={item.id} key={item.id} disabled={checkRoleDisadled(item)}>
                                    {item.roleName}
                                </Option>
                            )
                        })
                    }
                </Select>
            </Form.Item>
        </Form>
    );
});

export default UserForm;